<script setup lang="ts">
import { defineEmits, defineProps, ref, computed, onMounted } from 'vue'
import { category } from './type'
const emits = defineEmits(['select', 'handleClose', 'handleReset'])
const props = defineProps({
  styleList: {
    type: Array,
    default: []
  },
  spaceList: {
    type: Array,
    default: []
  },
  selectStyle: {
    type: Array,
    default: []
  },
  selectSpace: {
    type: Array,
    default: []
  }
})

const isOpen = ref(false)
const categoryType = ref(undefined)

const categories = computed(() => {
  if (categoryType.value == category.space) {
    return props.styleList
  } else {
    return props.spaceList
  }
})

const selectCategories = computed(() => {
  if (categoryType.value == category.space) {
    return props.selectSpace
  } else {
    return props.selectStyle
  }
})
const open = (type: category) => {
  categoryType.value = type
}
const openSpace = (type: category) => {
  categoryType.value = type
}

const value = ref([])

const change = () => {
  isOpen.value = true
}

const close = () => {
  isOpen.value = false
  emits('handleClose')
}

const handleSelect = (id) => {
  emits('select', categoryType.value, id)
}
const inSpaceSelection = () => {
  return categoryType.value == category.space
}

const openS = () => {
  categoryType.value = category.style
}
const openB = () => {
  categoryType.value = category.space
}
</script>

<template>
  <view class="even-space">
    <view class="drop-item">
      <uni-collapse>
        <uni-collapse-item
          :show-arrow="false"
          :open="isOpen"
          :disabled="true"
          @tap="change"
        >
          <template v-slot:title>
            <up-row customStyle="margin: 20rpx 0;">
              <up-col span="6">
                <view class="display-flex first" @tap="openS">
                  <view
                    :class="[
                      'title',
                      { active: categoryType == category.style && isOpen }
                    ]"
                    >品类</view
                  >
                  <u-icon
                    name="arrow-down"
                    color="#ed680e"
                    v-if="categoryType == category.style && isOpen"
                  ></u-icon>
                  <u-icon name="arrow-up" color="#7d7d7d" v-else></u-icon>
                </view>
              </up-col>
              <up-col span="6">
                <view class="display-flex" @tap="openB">
                  <view
                    :class="[
                      'title',
                      { active: categoryType == category.space && isOpen }
                    ]"
                    >空间</view
                  >
                  <u-icon
                    name="arrow-down"
                    color="#ed680e"
                    v-if="categoryType == category.space && isOpen"
                  ></u-icon>
                  <u-icon name="arrow-up" color="#7d7d7d" v-else></u-icon>
                </view>
              </up-col>
            </up-row>
          </template>

          <template>
            <view class="tag-layout">
              <view class="my-tag" v-for="item in categories" :key="item.id">
                <u-tag
                  :text="item.name"
                  class="my-tag"
                  shape="circle"
                  color="#fff"
                  bgColor="#ed680e"
                  borderColor="#ed680e"
                  @click="handleSelect(item.id)"
                  v-if="selectCategories.includes(item.id)"
                ></u-tag>
                <u-tag
                  :text="item.name"
                  class="my-tag"
                  shape="circle"
                  borderColor="#ed680e"
                  plain
                  color="#ed680e"
                  @click="handleSelect(item.id)"
                  v-else
                ></u-tag>
              </view>
            </view>
            <u-gap height="20"></u-gap>
            <view class="controls">
              <up-button
                :plain="true"
                color="#ed680e"
                @tap.native.stop="emits('handleReset', categoryType)"
                text="重置"
                shape="circle"
                size="small"
              >
              </up-button>
              <view class="gap white"></view>
              <up-button
                @tap.native.stop="close"
                color="#ed680e"
                throttleTime="400"
                text="确定"
                shape="circle"
                size="small"
              >
              </up-button>
            </view>
            <u-gap height="20"></u-gap>
          </template>
        </uni-collapse-item>
      </uni-collapse>
    </view>
  </view>
</template>

<style scoped lang="scss">
.display-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 60rpx;
  .title {
    font-size: 28rpx;
    display: inline-block;
    margin-right: 30rpx;
    color: #7d7d7d;
  }
  .title.active {
    color: #ed680e;
  }
}
.first {
  border-right: 1rpx solid #aaa;
}
.gap {
  width: 60rpx;
  &.white {
    background-color: #fff;
  }
}
.controls {
  width: 100%;
  display: flex;
  flex-direction: row;
}

.even-space {
  display: flex;
  flex-direction: row;
  .drop-item {
    width: 100%;
  }
}

.tag-layout {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .my-tag {
    padding: 10rpx;
  }
}
</style>
